<template>
  <!-- <van-tabs
    v-model:active="activeName"
    title-active-color="#fb5637"
    line-width="0px"
    border
    @click-tab="clickHandler"
  > -->
    <!-- 主播 -->
    <div class="actor-nav-box">
      <div class="actor-nav-item" @click="clickHandler(item.name)" v-for="item in actorList" :key="item.value">
        <span
          class="actor-nav-text"
          :class="item.value === actorActiveIndex ? 'active' : ''"
          @click="handlerActor(item.value)"
          >{{ item.value }}</span
        >
      </div>
    </div>
    <anchorItem ref="anchorItemInstance"></anchorItem>

    <!-- <van-tab title="相关度" name="relation">
      <keep-alive>
        <anchorItem ref="anchorItemInstance"></anchorItem>
      </keep-alive>
    </van-tab>
    <van-tab title="最多声音" name="voice">
      <anchorItem ref="anchorItemInstance"></anchorItem>
    </van-tab>
    <van-tab title="最多粉丝" name="fans">
      <anchorItem ref="anchorItemInstance"></anchorItem>
    </van-tab>
  </van-tabs> -->
</template>

<script setup lang="ts">
import { ref } from "vue";
import anchorItem from "./anchorItem.vue";
//子组件实例
const anchorItemInstance = ref<any>();

const clickHandler = (a: any) => {
  anchorItemInstance.value.params.condition = a;
  anchorItemInstance.value.users = [];
  anchorItemInstance.value.getAnchorData();
};

const actorList = [
  {
    value: "相关度",
    name:"relation"
  },
  {
    value: "最多声音",
    name:"voice"
  },
  {
    value: "最多粉丝",
    name:"fans"
  },
];

let actorActiveIndex = ref<string>('相关度');
const handlerActor = (value: any) => {
  actorActiveIndex.value = value;
};
</script>

<style lang="less" scoped>
// 主播
.actor-nav-box {
  width: 375px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  .actor-nav-item {
    width: 125px;
    height: 14px;
    display: flex;
    border-left: 1px solid #72727b;
    border-right: 1px solid #72727b;
    justify-content: center;
    align-items: center;

    .actor-nav-text {
      text-align: center;
      font-size: 14px;
      color: #72727b;

      height: 14px;
    }
    .active {
      color: #fe8466;
    }
  }
  .actor-nav-item:first-child {
    border-left: none; //  去掉第一个左边框
  }
  .actor-nav-item:last-child {
    border-right: none; // 去掉最后一个右边框
  }
}
</style>
